<template>
    <div>
        <!-- 导航栏 -->
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>宿舍管理></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格 -->
        <div>
            <el-card class="box-card">
                <div>
                    <div style="float:left">
                        <el-select v-model="value" style="width:135px" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="value2" style="width:250px"></el-input>
                        <el-button @click="mohuchaxun()" type="success">查询</el-button>
                        <el-button type="success" @click="chongzhi()">重置</el-button>
                    </div>
                    <div style="float:right">
                        导出的宿舍楼：
                        <el-select v-model="susheName" style="width:100px" placeholder="请选择">
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        导出文件名：<el-input v-model="filename" style="width:100px"></el-input>
                        <el-button @click="daochu()" type="success">导出</el-button>
                    </div>
                <el-table
                :data="tableData"
                height="500px"
                stripe
                style="width: 100%">
                <el-table-column
                type="index"
                >
                </el-table-column>
                <el-table-column
                prop="studentId"
                label="学号">
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名">
                </el-table-column>
                <el-table-column
                prop="specialtyName"
                label="专业">
                </el-table-column>
                <el-table-column
                prop="className"
                show-overflow-tooltip
                label="班级">
                </el-table-column>
                <el-table-column
                prop="dormitoryName"
                label="宿舍楼">
                </el-table-column>
                <el-table-column
                prop="dormitoryId"
                label="房间号">
                </el-table-column>
                <el-table-column
                prop="bedId"
                label="床号">
                </el-table-column>
                <el-table-column
                prop="payInfo"
                label="状态">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.payInfo==0">为空</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.payInfo==1">审核中</el-tag>
                    <el-tag v-else-if="scope.row.payInfo==2">审核通过</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.payInfo==3">未通过</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                prop="modifiedTime"
                show-overflow-tooltip
                label="申请时间">
                </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="editData(scope.row)" type="text" size="small">审核</el-button>
                    <el-button @click="deleteData(scope.row)" type="text" size="small">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
                </div>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
            </el-card>
            <el-dialog
            title="编辑"
            :visible.sync="centerDialogVisible"
            width="45%"
            height="450px"
            center>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="学号">
                    <el-input v-model="form.studentId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="form.specialtyName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="班级名称">
                    <el-input v-model="form.className" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="宿舍楼">
                    <el-input v-model="form.dormitoryName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="房间号">
                    <el-input v-model="form.dormitoryId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="床号">
                    <el-input v-model="form.bedId" :disabled="true"></el-input>
                </el-form-item>
                <!-- <el-form-item label="缴费信息">
                    <el-input v-model="form.payInfo"></el-input>
                </el-form-item> -->
                <el-form-item label="申请时间">
                    <el-input v-model="form.modifiedTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="审批">
                    <el-select v-model="form.payInfo" placeholder="请选择">
                    <el-option label="待审批" value="1"></el-option>
                    <el-option label="审批不通过" value="3"></el-option>
                    <el-option label="审批通过" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitData()">提交</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData: [],
            total:10,
            page:1,
            count:100,
            centerDialogVisible:false,
            form:{},
            options:[
                {value:'0',label:'学号'},
                {value:'1',label:'宿舍楼'},
                {value:'2',label:'姓名'},
            ],
            options2:[
                {value:'西一',label:'西一'},{value:'西二',label:'西二'},{value:'西三',label:'西三'},
                {value:'西四',label:'西四'},{value:'西五',label:'西五'},{value:'西六',label:'西六'},
                {value:'西七',label:'西七'},{value:'西八',label:'西八'},{value:'西九',label:'西九'},
                {value:'西十',label:'西十'},{value:'西十一',label:'西十一'},{value:'西十二',label:'西十二'},
                {value:'西十三',label:'西十三'},{value:'西十四',label:'西十四'},{value:'东一',label:'东一'},
                {value:'东二',label:'东二'},{value:'东三',label:'东三'},
                {value:'东四',label:'东四'},{value:'东五',label:'东五'},{value:'东六',label:'西六'},
                {value:'东七',label:'东七'},{value:'东八',label:'东八'},{value:'东九',label:'西九'},
                {value:'东十',label:'东十'},{value:'东十一',label:'东十一'},{value:'东十二',label:'西十二'},
                {value:'东十三',label:'东十三'}
            ],
            value:'',
            value2:'',
            susheName:'',
            filename:''
        }
    },
    created(){
        this.getDormitory()
    },
    methods:{
        getDormitory(){
            var _this=this
            var url='http://taruinfo.work:8088/getDormitoryByList?page='+_this.page+'&pageCount='+_this.count
            _this.$axios.get(url).then(function(res){
                console.log(res.data)
                if(res.data !=''){
                  _this.total=res.data.total
                  _this.tableData=res.data.records
                }else{
                    console.log('获取宿舍信息失败')
                }
            })
        },
        handleSizeChange(val){
            this.count=val
            this.getDormitory()
        },
        handleCurrentChange(val){
            this.page=val
            this.getDormitory()
        },
        editData(row) {
            console.log(row)
            this.form=row
            this.centerDialogVisible=true
        },
        commitData(){
            var _this=this
            var url='http://taruinfo.work:8088/dormitory/UpdateStatus'
            _this.$axios.put(url,_this.form).then(function(res){
                if(res.data.code==200){
                    _this.$message({
                      message: '审核成功',
                      type: 'success'
                    })
                    _this.centerDialogVisible=false
                    _this.getDormitory()
                }else{
                   _this.$message({
                      message: '审核失败',
                      type: 'error'
                    })
                   _this.centerDialogVisible=false 
                }
            })
        },
        deleteData(row){
            var _this=this
            var url='http://taruinfo.work:8088/dormitoryDelete?id='+row.id
            _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                _this.$axios.delete(url).then(function(res){
                if(res.data.code==200){
                    _this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    _this.getDormitory()
                }else{
                    _this.$message({
                        type: 'error',
                        message: '删除失败!'
                    })
                }
            })  
            }).catch(() => {
                _this.$message({
                    type: 'info',
                    message: '已取消删除'
                })         
            })
        console.log(row)
        },
        chongzhi(){
            this.getDormitory()
        },
        daochu(){
            var _this=this
            var url='http://taruinfo.work:8088/Dormitory/Export?dormitoryName='+_this.susheName+'&fileName='+_this.filename
            if(_this.susheName==""||_this.filename==""){
                _this.$message({
                   type: 'warning',
                   message: '宿舍名和导出名不能为空' 
                })
            }else{
                _this.$message({
                    message: '导出成功',
                    type: 'success'
                })
                window.location.href = url
                _this.susheName='',
                _this.filename=''
            }

        },
        mohuchaxun(){
            var _this=this
            var url1='http://taruinfo.work:8088/likeDormitoryByLists?current=1&size=100&studentId='+_this.value2
            var url2='http://taruinfo.work:8088/likeDormitoryByLists?current=1&dormitoryName='+_this.value2+'&size=100'
            var url3='http://taruinfo.work:8088/likeDormitoryByLists?current=1&name='+_this.value2+'&size=100'
            if(_this.value2!=''){
                if(_this.value=='0'){
                    _this.$axios.get(url1).then(function(res){
                        console.log(res.data)
                        if(res.data.code =='200'){
                        _this.total=res.data.data.total
                        _this.tableData=res.data.data.records
                        _this.value=''
                        _this.value2=''
                        }else{
                            console.log('获取宿舍信息失败')
                        }
                    })
                }else if(_this.value=='1'){
                    _this.$axios.get(url2).then(function(res){
                        console.log(res.data)
                        if(res.data.code =='200'){
                        _this.total=res.data.data.total
                        _this.tableData=res.data.data.records
                        _this.value=''
                        _this.value2=''
                        }else{
                            console.log('获取宿舍信息失败')
                        }
                    })
                }else if(_this.value=='2'){
                    _this.$axios.get(url3).then(function(res){
                        console.log(res.data)
                        if(res.data.code =='200'){
                        _this.total=res.data.data.total
                        _this.tableData=res.data.data.records
                        _this.value=''
                        _this.value2=''
                        }else{
                            console.log('获取宿舍信息失败')
                        }
                    })
                }else{

                }
            }else{
                _this.$message({
                    type: 'warning',
                   message: '条件不能为空' 
                })
            }
        }
    }
}
</script>
<style scoped>
.box-card{
    width: 1270px;
    height:615px;
    margin-top: 10px;
}
</style>
